<template>
  <div id="SilverBankList">
    <c-title :hide="false" text="银行卡列表"> </c-title>
    <div class="listBox">
      <div class="lis" v-for="(item, index) in list" :key="index">
        <div class="left">
          <img src="../../../assets/images/bank_2.png" v-if="item.bank == '中国工商银行'" />
          <img src="../../../assets/images/bank_1.png" v-if="item.bank == '中国银行'" />
          <img src="../../../assets/images/bank_3.png" v-if="item.bank == '中信银行'" />
          <img src="../../../assets/images/bank_4.png" v-if="item.bank == '上海银行'" />
          <img src="../../../assets/images/bank_12.png" v-if="item.bank == '中国建设银行'" />
          <img src="../../../assets/images/bank_5.png" v-if="item.bank == '光大银行'" />
          <img src="../../../assets/images/bank_6.png" v-if="item.bank == '民生银行'" />
          <img src="../../../assets/images/bank_7.png" v-if="item.bank == '北京银行'" />
          <img src="../../../assets/images/bank_8.png" v-if="item.bank == '平安银行'" />
          <img src="../../../assets/images/bank_9.png" v-if="item.bank == '交通银行'" />
          <img src="../../../assets/images/bank_10.png" v-if="item.bank == '招商银行'" />
          <img src="../../../assets/images/bank_11.png" v-if="item.bank == '广发银行'" />
          <img src="../../../assets/images/bank_13.png" v-if="item.bank == '浦发银行'" />
          <img src="../../../assets/images/bank_14.png" v-if="item.bank == '邮政银行'" />
        </div>
        <div class="right">
          <div class="bankName">
            <div class="name">{{ item.bank }}</div>
            <div class="untie" v-if="item.status == 1 && option != 'wisdom'" @click="relieve(item.id)">解绑</div>
          </div>
          <div class="cardType" v-if="option != 'wisdom'">{{ item.card_type_name }}</div>
          <div class="cardType" v-else>{{ item.card_type == 1?'借记卡':'信用卡' }}</div>
          <div class="cardNumber">{{ item.card }}</div>
        </div>
      </div>
    </div>
    <div class="posbtn set-pc-style">
      <div class="btn" @click="toBind">添加银行卡</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      urlStr:'plugin.silver-point-pay.frontend.union-card.index',
      unbindUrl:'plugin.silver-point-pay.frontend.union-card.unbind-card',
      option:''
    };
  },
  activated() {
    if(this.$route.params.option == 'wisdom'){
      this.option = this.$route.params.option;
      // 智E+支付
      this.urlStr = 'plugin.eplus-pay.frontend.card.bindCardList';
    }
    // 银典支付
    this.getData();
  },
  methods: {
    relieve(id) {
      this.$dialog
        .confirm({ message: "是否确定解绑此银行卡" })
        .then(() => {
          $http
            .get(this.data.unbindUrl, { pay_union_card_id: id }, " ")
            .then(res => {
              if (res.result) {
                this.$dialog.alert({ message: res.msg });
                this.getData();
              } else {
                this.$dialog.alert({ message: res.msg });
              }
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {});
    },
    toBind() {
      if(this.$route.params.option == 'wisdom'){
        this.$router.push(this.fun.getUrl("addWisdomBank", { to: "SilverBankListwisdom" }));
        return
      }
      this.$router.push(this.fun.getUrl("addSilverBank"));
    },
    getData() {
      $http
        .get(this.urlStr, {}, " ")
        .then(res => {
          this.list = res.data;
          console.log(this.list,'dddddddd')

        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
#SilverBankList {
  .listBox {
    padding: 1rem 0.9063rem 1rem 1.2813rem;

    .lis {
      background: #fff;
      border-radius: 0.3125rem;
      display: flex;
      justify-content: space-between;
      padding: 0.9375rem 0.8438rem;
      box-sizing: border-box;
      margin-bottom: 0.625rem;

      .right {
        font-size: 0.75rem;
        color: #666;
        flex: 1;
        margin-left: 0.5625rem;

        .bankName {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .name {
            font-size: 0.9375rem;
            color: #000;
          }
        }

        .cardType {
          text-align: left;
          margin-top: 0.3125rem;
          margin-bottom: 1.25rem;
        }

        .cardNumber {
          text-align: left;
        }
      }

      .left {
        width: 2.1875rem;
        height: 2.1875rem;
        margin-left: 0.625rem;

        img {
          width: 2.1875rem;
          height: 2.1875rem;
        }
      }
    }
  }

  .posbtn {
    position: fixed;
    width: 100%;
    height: 3.125rem;
    bottom: 0;
    left: 0;
    padding: 0.3125rem 1.7188rem;
    background: #fff;

    .btn {
      height: 2.5rem;
      font-size: 1rem;
      font-weight: 400;
      color: #fff;
      background: #f51d1d;
      border-radius: 0.3125rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>